{% extends 'myhome/index.html' %}

{% block title %}
<title>个人中心</title>
{% endblock %}

{% block css %}
<link href="/static/myhome/css/personal.css" rel="stylesheet" type="text/css">
<link href="/static/myhome/css/addstyle.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/static/myhome/css/iconfont.css">
{% endblock %}
{% block js %}
<script src="/static/myhome/AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/myhome/AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
{% endblock %}

{% block con %}
<div class="nav-table">
    <div class="long-title"><span class="all-goods">全部分类</span></div>
    <div class="nav-cont">
        <ul>
            <li class="index"><a href="{% url 'myhome_index' %}">首页</a></li>
            <li class="qc"><a href="#">闪购</a></li>
            <li class="qc"><a href="#">限时抢</a></li>
            <li class="qc"><a href="#">团购</a></li>
            <li class="qc last"><a href="#">大包装</a></li>
        </ul>
        <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
            <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
        </div>
    </div>
</div>
<b class="line"></b>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-address">
                <!--已有地址 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
                </div>
                <hr>
                <li class="user-addresslist"  style="display: none">
                        <!-- <span class="new-option-r rm"><i class="am-icon-check-circle"></i>默认地址</span> -->
                        <p class="new-tit new-p-re">
                            <span class="new-txt">小叮当</span>
                            <span class="new-txt-rd2">159****1622</span>
                        </p>
                        <div class="new-mu_l2a new-p-re">
                            <p class="new-mu_l2cw">
                                <span class="title">地址：</span>
                                <span class="province">湖北</span>
                                <span class="city">武汉</span>
                                <span class="dist">洪山</span>
                                <span class="street">雄楚大道666号(中南财经政法大学)</span></p>
                        </div>
                        <div class="new-addr-btn">
                             <a href="javascript:void(0);" class="rm" >设为默认</a>
                            <span class="new-addr-bar rm">|</span>
                            <a href="javascript:void(0);" class="addressedit">编辑</a>
                            <span class="new-addr-bar">|</span>
                            <a href="javascript:void(0);"  class="addressdel">删除</a>
                        </div>
                </li>
                <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails AddressAll">
                </ul>
                <div class="clear"></div>
                <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                <!--添加新地址-->
                <div class="" id="doc-modal-1">
                    <div class="add-dress">
                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf">
                                <strong class="am-text-danger am-text-lg">
                                    <a href="javascript:void(0)" style="font-size: 20px;" id="showaddress">新增地址&nbsp;&nbsp;<i class="iconfont icon-add-s"></i></a>
                                </strong>
                            </div>
                        </div>
                        <hr>
                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label for="user-name" class="am-form-label">收货人</label>
                                    <div class="am-form-content">
                                        <input type="text" id="user-name" placeholder="收货人">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-phone" class="am-form-label">手机号码</label>
                                    <div class="am-form-content">
                                        <input id="user-phone" placeholder="手机号必填" type="tel">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                <label for="user-phone" class="am-form-label">
                                        所在地
                                    </label>
                                    <div class="am-form-content address">
                                        <select name="province">
                                            {% for v in province %}
                                                <option value="{{ v.id }}">{{ v.name }}</option>
                                            {% endfor %}
                                        </select>

                                        <select name="city">
                                            <option>--请选择--</option>
                                        </select>
                                        <select name="county">
                                            <option>--请选择--</option>
                                        </select>                        
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-intro" class="am-form-label">详细地址</label>
                                    <div class="am-form-content">
                                        <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                                        <small>100字以内写出你的详细地址...</small>
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <div class="am-u-sm-9 am-u-sm-push-3">
                                        <a class="am-btn am-btn-danger" id="addressadd">保存</a>
                                        <a href="javascript: void(0)" class="am-close am-btn am-btn-danger" data-am-modal-close id="addressclose">取消</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function() {                          
                    $(".new-option-r").click(function() {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                    });
                    
                    var $ww = $(window).width();
                    if($ww>640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }
                    
                })
            </script>
            <div class="clear"></div>
        </div>
        <!--底部-->
        <div class="footer">
            <div class="footer-hd">
                <p>
                    <a href="#">恒望科技</a>
                    <b>|</b>
                    <a href="#">商城首页</a>
                    <b>|</b>
                    <a href="#">支付宝</a>
                    <b>|</b>
                    <a href="#">物流</a>
                </p>
            </div>
            <div class="footer-bd">
                <p>
                    <a href="#">关于恒望</a>
                    <a href="#">合作伙伴</a>
                    <a href="#">联系我们</a>
                    <a href="#">网站地图</a>
                    <em>© 2015-2025 Hengwang.com 版权所有</em>
                </p>
            </div>
        </div>
    </div>

    <aside class="menu">
        <ul>
            <li class="person active">
                <a href="index.html">个人中心</a>
            </li>
            <li class="person">
                <a href="#">个人资料</a>
                <ul>
                    <li> <a href="{% url 'myhome_personinfo' %}">个人信息</a></li>
                    <li> <a href="safety.html">安全设置</a></li>
                    <li> <a href="{% url 'myhome_personaddress' %}">收货地址</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的交易</a>
                <ul>
                    <li><a href="{% url 'myhome_personorder' %}">订单管理</a></li>
                    <li> <a href="change.html">退款售后</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的资产</a>
                <ul>
                    <li> <a href="bill.html">账单明细</a></li>
                </ul>
            </li>
        </ul>
    </aside>
</div>

<script type="text/javascript">
    
    // 获取页面中的下拉选框 绑定事件
    $('.address select').click(function(){
        // 获取当前选中的元素
        var id = $(this).val()
        // 发送ajax请求，获取下一级的数据
        $.get('{% url 'myhome_getcitys' %}',{'id':id},function(data){
            // 判断返回的数据
            if(data.length==0){
                return
            }
            // 判断城市等级
            if(data[0].level==2){
                var res = $('.address select[name=city]')
            }else if(data[0].level==3){
                var res = $('.address select[name=county]')
            }else{
                return;
            }
            var ops = ''
            // 遍历获取的结果,拼接成option选项
            for(var i=0;i<data.length;i++){
                ops += '<option value="'+data[i]['id']+'">'+data[i].name+'</option>'
            }
            // 把拼接好的选项加入到下拉框中
            res.html(ops)
        },'json')
    })
    // 获取当前用户的所有收货地址
    getUsersAddress() // 每当打开此页面自动获取所有用户的地址
    function getUsersAddress(){
        // 清空之前的数据
        $('.AddressAll').empty()
        // 发送ajax请求获取数据
        $.get('{% url 'myhome_addresslist' %}',function(data){
            if(data.error==0){
                console.log(data)
                // 有数据
                var add = data.data
                // console.log(add)
                // 循环数据
                for (var i=0;i < add.length;i++){
                    var li = $('.user-address li').eq(0).clone()
                    // console.log(add[i].id)
                    // console.log('1234')
                    // 判断当前是否为默认地址
                    if(add[i].isCheck){
                        li.addClass('defaultAddr')
                        li.find('.rm').remove()
                    }
                    li.attr('addrid',add[i].id)
                    li.find('.rm').attr('id',add[i].id)
                    li.find('.addressdel').attr('id',add[i].id)
                    li.find('.addressedit').attr('id',add[i].id)
                    li.find('.new-txt').text(add[i].receiver)
                    li.find('.new-txt-rd2').text(add[i].receivephone)
                    li.find('.province').text(add[i].province)
                    li.find('.province').attr('pid',add[i].province)
                    li.find('.city').text(add[i].city)
                    li.find('.city').attr('cid',add[i].city)
                    li.find('.dist').text(add[i].county)
                    li.find('.dist').attr('did',add[i].county)
                    li.find('.street').text(add[i].info)
                    // 让元素显示
                    li.show()
                    // 创建li加入到ul中
                    $('.AddressAll').append(li)
                } 
            }
        },'json')
    }

    // 默认地址的单击事件
    $(document).on('click',".AddressAll li .rm",function(){
        var id=$(this).attr('id')
        console.log(id)
        $.get('{% url 'myhome_addressedit' %}',{'id':id},function(data){
            if(data['error'] == 1){
                alert(data['msg'])
            }
            if(data['error'] == 0){
                alert(data['msg'])
            }
            getUsersAddress()
        })   
    })

    // 地址添加
    $('#addressadd').click(function(){
        var adds = {}
        adds.receiver = $('#user-name').val()
        adds.receivephone = $('#user-phone').val()
        adds.province = $('select[name=province]').val()
        adds.city = $('select[name=city]').val()
        adds.county = $('select[name=county]').val()
        adds.info = $('#user-intro').val()
        var data = JSON.stringify(adds);
        // 发送ajax请求,存储地址
        $.get('{% url 'myhome_addressadd'%}',{'data':data},function(data){
            getUsersAddress()
            // 触发取消事件
            $('#addressclose').trigger('click')
        },'json')
    })
    // 删除某个收货地址
    $(document).on('click','.AddressAll li .addressdel',function(){
        // 获取默认地址的id
        var id = $(this).attr('id')
        console.log(id)
        $.get('{% url 'myhome_addressdel' %}',{'id':id},function(data){
            if(data['error'] == 1){
                alert(data['msg'])
            }
            if(data['error'] == 0){
                alert(data['msg'])
            }
            getUsersAddress()
        })
    })

    // 编辑选中的收货地址
    $(document).on('click','.AddressAll li .addressedit',function(){
        // 收货地址id
        var id = $(this).attr('id')
        console.log(id,typeof(id))
        var t = $(this).parent().prevAll('p').find('.new-txt').text()
        var d = $(this).parent().prevAll('p').find('.new-txt-rd2').text()
        // console.log(d)
        var p = $(this).parent().prev().find('.province').text()
        console.log(p)
        var c = $(this).parent().prev().find('.city').text()
        var d = $(this).parent().prev().find('.dist').text()
        // $('.address .province').find('p').text(p)
        // console.log(p)
        // console.log(c)
        // console.log(d)
        // $.get('{% url 'myhome_personaddressedit' %}',{'id':id,'p':p,'c':c,'d':d},function(data){

        location.href="{% url 'myhome_personaddressedit' %}?editid="+id+"&p="+p+"&c="+c+"&d="+d
            
        // },'json')

    })

    // 地址添加表单的显示与隐藏
    $("#showaddress").click(function(){
        $(".add-dress form").toggle();
    })
    $("#addressadd").click(function(){
        $(".add-dress form").hide();
    })
    $("#addressclose").click(function(){
        $(".add-dress form").hide();
    })
</script>
{% endblock %}